<template>
<div>
  <div class="hbg">
        <div class="htop">
          <div class="hleft" @click="change">
            <span class="hjilu">飞行记录超过</span> 
            <span class="hbili">42.66%</span> 
          </div>
          <div class="hright">
            <span class="iconfont icon-qiandao_o qindao" ></span>
            <span class="iconfont icon-saomiao" ></span> 
            <span class="iconfont icon-pinglun"></span>
          </div>
        </div>
  </div>
  <More/>

  <Fly/>
  <Service/>
  <van-tabs>
    <van-tab v-for="(item,index) in tab_list" :key="index" :title="item.name">
      <div v-if="item.id === 1">
        <Video/>
        <News/>
      </div>
      <div v-if="item.id === 2">
        <SelectionVideo/>
      </div>
      <div v-if="item.id === 3">
        <Travel/>
      </div>
      <div v-if="item.id === 4">
        <Variety/>
      </div>
      <div v-if="item.id === 5">
        <Game/>
      </div>
    </van-tab>
  </van-tabs>


  <Nav/>



</div>
  
</template>

<script>
import More from "./components/more.vue"
import Fly from "./components/fly.vue"
import Service from "./components/service.vue"
import Video from "./components/video.vue"
import News from "./components/news.vue"
import SelectionVideo from "./components/selectionVideo.vue"
import Travel from "./components/travel.vue"
import Variety from "./components/variety.vue"
import Game from "./components/game.vue"

import Nav from "@/components/bottomnav.vue"
export default {
  components:{
    More,Fly,Service,Video,News,Nav,SelectionVideo,Travel,Variety,Game
  },
  data(){
    return{
      tab_list:[
        {id:1,name:'推荐'},
        {id:2,name:'精选视频'},
        {id:3,name:'旅行'},
        {id:4,name:'综艺'},
        {id:5,name:'游戏中心'},
      ]
    }
  },
  methods:{
    change(){
      this.$router.push({path:'/tripStatistics'})
    }
  }
    
}
</script>

<style>
html{
  background-color: #f8f8f8;
}
.hbg{
  width: 100%;
  height: 2rem;
  background: url(/shouyebj.jpg) no-repeat;
  background-size: 4rem  auto;
  overflow: hidden;
  /* background-position: center; */
}
.htop{
  margin-top: 0.3rem;
  width: 100%;
  height: .25rem;
  /* background-color:gainsboro; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: .06rem;
}
.htop .hleft{
  width: 195px;
  height: 25px;
  background-color: white;
  border: 1px solid white;
  border-radius: 20px;
}
.hqiandao{
  color: orange;
}
.hright{
  width: 100px;
  display: flex;
  justify-content: space-evenly;
}
.hright span{
  font-size: 20px;
  color: #fff;
}
.hjilu{
  font-size: 12px;
  line-height: 24px;
  margin-left: 10px;
}
.hbili{
  float: right;
  font-size: 12px;
  line-height: 24px;
  margin-right: 10px;
  color:#259624
}
</style>